<template>
  <div class="container">
    <van-swipe-cell :before-close="beforeClose">
      <van-row>
        <van-col span="18" class="matr">
          <div class="name">{{value.matrName}}</div>
          <div class="spec">{{value.matrSpec}}</div>
          <div class="lot">
            {{value.lot}}
          </div>
        </van-col>
        <van-col span="6"  class="matr">
          <div class="qty"> {{value.packageQty}} {{value.packageUnit}}  ( {{value.skuQty}} {{value.matrUnit}})</div>
          <div class="sn">{{value.snNo}}</div>
          <div class="price">￥ {{value.amount}}</div>
        </van-col>
      </van-row>
      <template #right>
        <van-button square type="danger" text="删除" class="delete-button"/>
      </template>
    </van-swipe-cell>
  </div>
</template>
<script>
import Vue from 'vue'
import { SwipeCell } from 'vant'

Vue.use(SwipeCell)
/* eslint-disable*/
export default {
  data() {
    return {
    }
  },
  props: {
    value: Object
  },
  components: {
  },
  computed: {
  },
  methods: {
    beforeClose({ position, instance }) {
      if(position == 'right') {
        this.$emit('delete',this.value)
      }
    },
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
  $line-height:25px;
  .container {
    background-color: white;
    padding:5px;
    border-radius: 5px;
  }
  .matr {
    line-height: $line-height;
    text-align: left;
    font-size: 12px;
    text-overflow:ellipsis;//文字隐藏后添加省略号
    white-space:nowrap;//强制不换行
    .spec, .lot {
      color:#2f2f2f;
    }
    .name {
      font-weight: bold;
      color:#1f1f1f;
    }
    .qty {
      color:#2f2f2f;
      text-align: right;
    }
    .price {
      color:#2f2f2f;
      text-align: right;
    }
  }
  .sn  {
    color:#2f2f2f;
    text-align: right;
  }
  .delete-button {
    height: 100%;
  }

</style>
